tick()

Posted on 2023-02-02 by

Tick is a function in Svelte that returns a promise that resolves when the update is finished.

This means that we can for example console.log() reactive declarations .

1 * 2 = 2

<script>
  import { tick } from "svelte";
  let count = 1;
  $: double = count * 2;

  async function increment() {
    count++;
    // This will log the previous value because it did not update yet
    console.log("Before tick:" + double);
    // but we can use Svelte's tick() to wait until it is updated
    await tick();
    console.log("After tick:" + double);
  }
  function decrement() {
    count--;
  }
</script>

<button on:click={decrement}>-</button>
{count} * 2 = {double}
<button on:click={increment}>+</button>

It can also help when you need to do something after something asynchronous happens .

For example here we have an input field which turns our input into upper case characters.

If you type something and then click in the middle of the input and type again you will notice that the cursor jumps to the end which we don't want.

<script>
  let value = "";
  function onInput(event) {
    const input = this;
    let selectionStart = input.selectionStart;
    let selectionEnd = input.selectionEnd;
    value = input.value.toUpperCase();
    input.selectionStart = selectionStart;
    input.selectionEnd = selectionEnd;
  }
</script>

<input on:input={onInput} {value} type="text">

To fix this we can use tick() .

<script>
  import { tick } from "svelte";
  let value = "";
  async function onInput(event) {
    const input = this;
    let selectionStart = input.selectionStart;
    let selectionEnd = input.selectionEnd;
    value = input.value.toUpperCase();
    await tick();
    input.selectionStart = selectionStart;
    input.selectionEnd = selectionEnd;
  }
</script>

<input on:input={onInput} {value} type="text">

Tick allows you to wait until DOM updates have been applied , thus fixing our problem.

It could also help if you want to save the scroll position, add some elements and after that restore the scroll position, in that case just run tick() after adding the elements .